<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.RATING.DESCRIPTION' | translate}}
      </p>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>
      <div class="free-demo-row">
        <h3 class="free-title">free-rating</h3>
        <p>{{'COMPONENT.RATING' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>value</free-table-cell>
              <free-table-cell>
                <ng-template><code>Number</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.RATING.OPTION.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>theme</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>
                  {{'DEMO.RATING.OPTION.1' | translate}}(primary/info/success/warning/danger)
                </ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>readonly</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.RATING.OPTION.2' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
        <h3 class="free-title">{{'EVENT' | translate}}</h3>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'EVENT' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>onChange</free-table-cell>
              <free-table-cell>
                <ng-template>
                  {{'DEMO.RATING.EVENTS.0' | translate}}
                </ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
    </div>
    <div fGrid="6" class="free-demo-board">
      <div class="free-card-board">
        <h3 class="free-toolbar">Import</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="CODE">
            <free-code lang="typescript">
              import &#123;RatingModule&#125; from 'freeng/freeng';
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-rating></free-rating>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-rating&gt;&lt;/free-rating&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Theme</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-rating theme="primary" [value]="3"></free-rating>
            <free-rating theme="info" [value]="3"></free-rating>
            <free-rating theme="success" [value]="3"></free-rating>
            <free-rating theme="warning" [value]="3"></free-rating>
            <free-rating theme="danger" [value]="3"></free-rating>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-rating theme="primary" [value]="3"&gt;&lt;/free-rating&gt;
              &lt;free-rating theme="info" [value]="3"&gt;&lt;/free-rating&gt;
              &lt;free-rating theme="success" [value]="3"&gt;&lt;/free-rating&gt;
              &lt;free-rating theme="warning" [value]="3"&gt;&lt;/free-rating&gt;
              &lt;free-rating theme="danger" [value]="3"&gt;&lt;/free-rating&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Hover</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-rating [hover]="true" [value]="3"></free-rating>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-rating [hover]="true" [value]="3"&gt;&lt;/free-rating&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Half</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-rating theme="primary" [half]="true" [hover]="true" [value]="3.5"></free-rating>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-rating theme="primary" [half]="true" [hover]="true" [value]="3.5"&gt;&lt;/free-rating&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Readonly</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-rating [readonly]="true" [value]="3"></free-rating>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-rating [readonly]="true" [value]="3"&gt;&lt;/free-rating&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Change Event</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-rating (onChange)="ratingChange($event)"></free-rating>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-rating (onChange)="ratingChange($event)"&gt;&lt;/free-rating&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
